<template>
  <view class="map-container" :class="{ 'fullscreen': isFullscreen }">
    <map
      id="map"
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :scale="scale"
      show-location
      @regionchange="onRegionChange"
      @tap="onMapTap"
    ></map>
    <view class="fullscreen-control" @click="toggleFullscreen">
      <uni-icons :type="isFullscreen ? 'up' : 'down'" size="24" color="#007AFF"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
// 不需要显式导入uni-icons组件，它是全局注册的

// 全屏状态
const isFullscreen = ref(false);

// 定义组件的props
const props = defineProps({
  // 初始纬度
  initialLatitude: {
    type: Number,
    default: 39.908823
  },
  // 初始经度
  initialLongitude: {
    type: Number,
    default: 116.397470
  },
  // 地图缩放级别
  initialScale: {
    type: Number,
    default: 14
  }
});

// 定义组件的事件
const emit = defineEmits(['update:location', 'locationChanged', 'fullscreenChange']);

// 响应式状态
const latitude = ref(props.initialLatitude);
const longitude = ref(props.initialLongitude);
const scale = ref(props.initialScale);

// 计算属性：标记点
const markers = computed(() => {
  return [{
    id: 1,
    latitude: latitude.value,
    longitude: longitude.value,
    // 使用系统默认标记点，不指定iconPath
    width: 30,
    height: 30
  }];
});

// 监听初始位置变化
watch(() => props.initialLatitude, (newVal) => {
  if (newVal) latitude.value = newVal;
});

watch(() => props.initialLongitude, (newVal) => {
  if (newVal) longitude.value = newVal;
});

// 地图区域变化事件处理
const onRegionChange = (e: any) => {
  if (e.type === 'end' && e.causedBy === 'drag') {
    // 获取地图中心点位置
    const mapContext = uni.createMapContext('map');
    mapContext.getCenterLocation({
      success: (res) => {
        updateLocation(res.latitude, res.longitude);
      }
    });
  }
};

// 地图点击事件处理
const onMapTap = (e: any) => {
  updateLocation(e.detail.latitude, e.detail.longitude);
};

// 更新位置
const updateLocation = (lat: number, lng: number) => {
  latitude.value = lat;
  longitude.value = lng;
  
  // 向父组件发送位置更新事件
  emit('update:location', { latitude: lat, longitude: lng });
  emit('locationChanged', { latitude: lat, longitude: lng });
};

// 移动到当前位置
const moveToLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      updateLocation(res.latitude, res.longitude);
    },
    fail: () => {
      uni.showToast({
        title: '获取位置失败',
        icon: 'none'
      });
    }
  });
};

// 组件挂载时，尝试获取当前位置
onMounted(() => {
  // 如果没有提供初始位置，则尝试获取当前位置
  if (!props.initialLatitude || !props.initialLongitude) {
    moveToLocation();
  }
});

// 切换全屏模式
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
  emit('fullscreenChange', isFullscreen.value);
};

// 暴露方法给父组件
defineExpose({
  moveToLocation,
  updateLocation,
  toggleFullscreen
});
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 66vh; /* 默认高度为视口高度的三分之二 */
  transition: all 0.3s ease;
  
  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    z-index: 999;
  }
  
  .map {
    width: 100%;
    height: 100%;
  }
  
  .map-controls {
    position: absolute;
    bottom: 80px;
    right: 20px;
    z-index: 10;
    
    .map-control-item {
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
  }
  
  .fullscreen-control {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
}
</style>